﻿@page "/in-place-editor/drop-down"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.InPlaceEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the usage of drop-down components such as AutoComplete, ComboBox, DropDownList, and MultiSelect. Click on the dotted input element to switch to the editable state of the corresponding integrated component.</p>
</SampleDescription>
<ActionDescription>
    <p>This sample explains the way to integrate drop-down components with <code>In-place Editor</code>. The applicable types of components are:</p>
    <p>
        <ul>
            <li><code>DropDownList</code></li>
            <li><code>AutoComplete</code></li>
            <li> <code>ComboBox</code></li>
            <li> <code>MultiSelect</code></li>
        </ul>
    </p>
    <p>The above components and their features are editable in place and can be customized with the model properties of the specific component.</p>
</ActionDescription>



<div class="row">
    <div class="col-lg-8 control-section inplace-control-section drop-down-layout">
        <div class="control_wrapper">
            <table>
                <tr>
                    <td>
                        <label class="control-label">
                            DropDownList
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor @bind-Value="@DropdownValue" Type="InputType.DropDownList" Mode="@Mode" TValue="string">
                                <EditorComponent>
                                    <SfDropDownList TValue="string" TItem="Countries" @bind-Value="@DropdownValue" DataSource="@Country">
                                        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </EditorComponent>
                            </SfInPlaceEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            AutoComplete
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor Type="InputType.AutoComplete" @bind-Value="@AutoValue" Mode="@Mode" TValue="string">
                                <EditorComponent>
                                    <SfAutoComplete TValue="string" TItem="Countries" @bind-Value="@AutoValue" DataSource="@Country" Autofill=true>
                                        <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
                                    </SfAutoComplete>
                                </EditorComponent>
                            </SfInPlaceEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            ComboBox
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor Type="InputType.ComboBox" @bind-Value="@ComboValue" Mode="@Mode" TValue="string">
                                <EditorComponent>
                                    <SfComboBox TValue="string" @bind-Value="@ComboValue" TItem="Countries" DataSource="@Country">
                                        <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
                                    </SfComboBox>
                                </EditorComponent>
                            </SfInPlaceEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            MultiSelect
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor Type="InputType.MultiSelect" @bind-Value="@MultiValue" Mode="@Mode" TValue="string[]">
                            <EditorComponent>
                                <SfMultiSelect TValue="string[]" @bind-Value="@MultiValue" TItem="Countries" Mode="VisualMode.Box" DataSource="@Country" AllowFiltering="true">
                                    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
                                </SfMultiSelect>
                            </EditorComponent>
                        </SfInPlaceEditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-lg-4 property-section" id="dropdownProperty">
        <table id="property" title="Properties">
            <tr>
                <td>
                    <div> Mode</div>
                </td>
                <td>
                    <div>
                        <SfDropDownList Width="90%" TValue="string" TItem="InplaceModes" DataSource="@ModeData" @bind-Value="@DropMode">
                            <DropDownListEvents TValue="string" TItem="InplaceModes" ValueChange="@ChangeEditMode"></DropDownListEvents>
                            <DropDownListFieldSettings Text="text" Value="value"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

@code {
    private string DropdownValue = "CA";
    private string AutoValue = "Australia";
    private string ComboValue = "Finland";
    private string[] MultiValue = new string[] { "AU", "BM" };
    public string DropMode { get; set; } = "Inline";

    private RenderMode Mode = RenderMode.Inline;

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };


    public class InplaceModes
    {
        public string value { get; set; }
        public string text { get; set; }
    }

    List<InplaceModes> ModeData = new List<InplaceModes>()
{
        new InplaceModes(){ value= "Inline", text= "Inline" },
        new InplaceModes(){ value= "Popup", text= "Popup" }
    };

    private void ChangeEditMode(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, InplaceModes> args)
    {
        this.Mode = (args.Value.ToString() == "Popup" ? RenderMode.Popup : RenderMode.Inline);
    }
}
<style>
    .inplace-control-section.drop-down-layout .e-inplaceeditor .e-editable-component .e-clear-icon-hide,
    .e-inplaceeditor-tip .e-editable-component .e-input-group .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
    }

    .inplace-control-section.drop-down-layout .control_wrapper label {
        padding: 15px;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 0px;
    }

    .inplace-control-section.drop-down-layout .control_wrapper {
        margin: auto;
        max-width: 400px;
    }

        .inplace-control-section.drop-down-layout .control_wrapper table {
            margin: auto;
        }

            .inplace-control-section.drop-down-layout .control_wrapper table td {
                width: 200px;
                height: 100px;
            }

    #dropdownProperty table td {
        width: 50%;
    }

    #dropdownProperty table div {
        padding-left: 10px;
        padding-top: 10px;
    }
</style>